<template>
	<view>
		<view class="lunbotu">
				<swiper class="swiper-box" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
					<swiper-item v-for="(item, index) in info" :key="index">
						<view :class="item.colorClass" class="swiper-item">
							<image class="image" :src="item.url" mode="heightFix" />
						</view>
					</swiper-item>
				</swiper>
		</view>
		<view>
			<uni-card>
				<text style="color: #ee350b;font-size: 40rpx;font-weight: 500;"> 200积分</text><br>
				<view>
					<navigator url="./Rule">
					<text >爱心积分换物规则详情 </text>
					<image src="../../static/image/voluntary/xiayiye.png" style="margin-left: 10rpx;width: 30rpx;height: 25rpx;"></image>
					</navigator>
				</view>
				<text style="color: #A5A5A5;">——————————————————————</text>
				<text style="color: #000000;font-weight: 600;font-size: 35rpx;">商品全称</text>
			</uni-card>
			
			<uni-card>
				<view>
				    <view>
				        <text style="color: #A5A4A4;">选择</text>
						<text style="margin-left: 40rpx;">商品分类选择</text>
						<image class="image1" src="../../static/image/voluntary/xiayiye.png"></image>
				    </view>
					<view style="margin-top: 20rpx;">
					    <text style="color: #A5A4A4;">发货</text>
						<text style="margin-left: 40rpx;">XX省XX市</text><br>
						<text style="margin-left: 97rpx;">2月11日前发货，特殊情况除外</text>
					</view>
					<view style="margin-top: 20rpx;">
					    <text style="color: #A5A4A4;">保障</text>
						<text style="margin-left: 40rpx;">商品基础保障</text>
						<image class="image1" src="../../static/image/voluntary/xiayiye.png"></image>
					</view>
				    <view style="margin-top: 20rpx;">
				        <text style="color: #A5A4A4;">参数</text>
				    	<text style="margin-left: 40rpx;">商品各项参数</text>
				    	<image class="image1" src="../../static/image/voluntary/xiayiye.png"></image>
				    </view>
				</view>
			</uni-card>
			<view style="height: 200rpx;">
				<uni-card>
				<text style=" color: #000000;font-weight: 600;font-size: 35rpx;">收货地址</text>
				<input class="input2" placeholder="请在此处填写您的收货地址"/>
				</uni-card>
			</view>
		</view>
		
		<view>
			<view class="button" @click="clickCard">确认兑换</view>
		</view>
	</view>
</template>

<script>
	export default {
			data() {
				return {
					
					indicatorDots: true,
					autoplay: true,
					interval: 2000,//切换的间隔时间
					duration: 500,//滑动动画时长
	
	
					info: [{
							url: '../../static/image/voluntary/taiyang.png',
						},
						{
							url: '../../static/image/voluntary/taiyang.png',
						},
						{
							url: '../../static/image/voluntary/taiyang.png',
						},
					],
			}
		},
		onLoad() {
		},
		methods: {
			clickCard() {
						uni.showToast({
							title: '兑换成功',
							icon: 'none'
						});
					}
				
			}
		}
				
</script>

<style scoped>
		page {
				width: 100%;
				height: 100%;
			}
		
			.lunbotu {
				height: 430rpx;
		
			}
		.swiper-box {
			height: 200px;
		}
		
		.swiper-item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			background-color: #F0D3C7;
			color: #fff;
			margin: 10px;
			border-radius: 15upx;
			height: 380upx;
		}
		.image {
			
			height: 380upx;
			border-radius: 15upx;
		}
		.image1{
			width: 30rpx;
			height: 30rpx;
			margin-left: 300rpx;
		}
		.button {
			
		    height: 60px;
			width: 100%;
			border-top: 2px solid #cccccc;
		    line-height: 50px;
		    font-size: 20px;
			font-weight: 600;
		    background-color: #f0d3c7;
		    color: #505050;
		    text-align: center;
		}
		.input2{
			font-size: 35rpx;
			height: 100rpx;
		}
</style>
